<template>
    <div id="head">
        
        <div class="left head-itme">
            <slot name='head-left'>
                <!-- <van-icon name="arrow-left" /> -->
            </slot>
        </div>
        <div class="center head-itme">
            <slot name='head-center'>
                <!-- <input type="text">
                <van-icon name="search" /> -->
            </slot>
        </div>
        <div class="right head-itme">
            <slot name='head-right'></slot>

        </div>
    </div>



</template>
<script>
export default {
    name: "Head"
};
</script>
<style scoped>

#head{
    height: 44px;
    line-height: 44px;
    display: flex;
    /* background-color: rgb(237, 247, 230); */
    margin-bottom: 20px;
    position:fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
    padding: 5px;
}
.left, .right{
    width: 60px;
    text-align: center;
    /* background-color: rgb(182, 37, 37); */
}
.left{
    margin-right: 20px;
}
.center{
    flex: 1;
    /* background-color: rgb(228, 93, 93); */
    line-height: 44px;
}

</style>